<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>边框案例</title>
		<style>
		/*练习  1 圆形   2.正三角形
		思路1:宽高与边框倒角一致
		思路2:div#d1   css中 :抓到div   【斜线】
						左边框：50像素实线红色
						右边框：50像素实线黄色
						下边框：50像素实线黑色
			注意：先别加宽高   transparent  透明色				
		*/
	   div#circle{
		width:200px;
		height:200px;
		border:1px solid red;
		border-radius: 50%;
		/*边框阴影 box-shadow 属性*/
		box-shadow: 5px 5px 50px 50px red inset;
	   }
		div#triangle{
		width: 0;	
		/*border-left:50px solid transparent;
		border-right:50px solid transparent;
		border-bottom: 50px solid black;*/
		/*两行 倒三角 蓝色 透明度 .3
		提醒 ：所有边框 50px solid transparent
		     上边框颜色改成蓝色   0,0,255 
		*/	
	    border: 50px solid transparent;
		border-right-color: rgb(0,0,255,.3);
		}	
		/* outline 边框轮廓 只针对input 元素*/
		input{
			outline:1px.solid red;
		}
		/*实际应用：通配选择器 去掉轮廓
		*{ outline：0;}
		*/
		</style>
	</head>
	<body>
		<div id="circle"></div>
		<div id="triangle"></div>
		边框：<input type="text">
	</body>
</html>